// components/test/index.js
Component({
  options: {
    // 默认的属性是 页面 和 组件的样式互相不影响 isolated  不通
    // apply-shared 这个属性就是  页面可以影响组件的样式，但是组件不能影响页面  单向
    // shared 父页面 能够影响子组件， 子组件也能够去影响父页面  双向
    // 小程序的 组件 有样式隔离问题，单词我记不住了，有一个shared我有点印象。 父页面里面class样式  和 子组件里面写class 样式 会互相的影响。 如果是其他两个属性，具体名称我忘记，他们就会有隔离的问题
    // styleIsolation: 'isolated'
    // styleIsolation: 'apply-shared'
    styleIsolation: 'shared',
    // 下面的配置是开启多个插槽的配置，如果不配，就将所有的插槽当做默认插槽
    multipleSlots: true
  },

  // 看视频--培训 6K - 15K  ---->   跟着网上的一些官网，一些博客， 看别人代码 20K+  --->  看一下github里面的源码  25K+

  // 组件自己的生命周期函数
  // 组件在页面初始化的时候，就挂载好了，在普通的tabbar栏切换的时候，组件并不会销毁
  // 只有我们通过 reLaunch 跳转页面的时候，当前页面才会被销毁，组件也会被销毁
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      console.log('挂载好组件');
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      console.log('组件移除');
    },
  },
  // 下面的生命周期函数，是组件所在页面的 生命周期
  pageLifetimes: {
    show: function() {
      // 页面被展示
      console.log('11');
    },
    hide: function() {
      // 页面被隐藏
      console.log('22');
    },
    resize: function(size) {
      // 页面尺寸变化
      console.log('33');
    }
  },

  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 10
  },

  /**
   * 组件的方法列表
   */
  methods: {
    add() {
      if (this.data.num < this.properties.max) {
        this.setData({
          num: this.data.num + 1
        })
        return
      }

      wx.showToast({
        title: '最大值只能是15',
      })
    },
    minux() {
      this.setData({
        num: this.data.num - 1
      })
    }
  }
})
